<!-- here is the script that will do the ajax. It is triggered when the form is submitted -->
<script type="text/javascript">
function fillTable()
{
	$('#datatable').dataTable( {
		"bDestroy": true,
        "ajax": "<?php echo base_url() ?>administrator/user/load_list"
    } );
}

function deleteData(id)
{
	var result = confirm("Are you sure to delete this data?");
	if (result) 
	{
		//Logic to delete the item

		var form_data = {
			id: id,
			ajax: '1'   
		  };

		  $.ajax({
			url: "<?php echo base_url() ?>administrator/user/delete",
			type: 'POST',
			data: form_data,
			success: function() {
			   fillTable();
               showDeleteNotification();
			}
		  });
		  
		  return false;
	}	
}

function editData(id)
{
	$.getJSON("<?php echo base_url() ?>administrator/user/edit/" + id, function(data){
	  $.each(data, function(i,item){
		  
		  $("#id_edit").val(item['id']);
		  $("#username_edit").val(item['username']);	
		  $("#fullname_edit").val(item['fullname']);		
		  $("#email_edit").val(item['email']);		
		  $("#phone_edit").val(item['phone']);		
		  $("#status_edit").val(item['status']);		
		  
		  $('#edit-modal').modal('toggle');
	  });
	});
}

$(function(){	
	
	fillTable();
    $('#save-button').click(function() {
      var form_data = {
        username: $('#username').val(),
        fullname: $('#fullname').val(),
        email: $('#email').val(),
        phone: $('#phone').val(),
        status: $('#status').val(),
        ajax: '1'   
      };

      $.ajax({
        url: "<?php echo base_url() ?>administrator/user/add",
        type: 'POST',
        data: form_data,
        success: function() {
		   closeModal();
		   fillTable();
           showSaveNotification();
        }
      });

      return false;
    });
	
	$('#update-button').click(function() {
      var form_data = {
		id: $('#id_edit').val(),
        username: $('#username_edit').val(),
        fullname: $('#fullname_edit').val(),
        email: $('#email_edit').val(),
        phone: $('#phone_edit').val(),
        status: $('#status_edit').val(),
        ajax: '1'   
      };

      $.ajax({
        url: "<?php echo base_url()?>administrator/user/update",
        type: 'POST',
        data: form_data,
        success: function() {
		   closeModal();
		   fillTable();
           showUpdateNotification();
        }
      });

      return false;
    });
    	
});

</script>
<div class="col-md-12" id="content">
    <div class="alert alert-success save-notif hide">
        <strong>Success!</strong> New record has been added.
    </div>

    <div class="alert alert-info update-notif hide">
        <strong>Success!</strong> You have to change the data .
    </div>

    <div class="alert alert-warning delete-notif hide">
        <strong>Warning!</strong> The record has been deleted.
    </div>
    <!-- BEGIN Portlet PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-list"></i>List of Users
            </div>
            <div class="actions">
                <a class="btn btn-default btn-sm" data-toggle="modal" href="#add-modal">
                <i class="fa fa-plus"></i> Add </a>
                <a class="btn btn-icon-only btn-default btn-sm fullscreen" href="javascript:;" data-original-title="" title="">
                </a>
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-hover table-bordered" id="datatable">
				<thead>
					<tr>
						<th>Username</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Phone</th>
						<th>Status</th>
						<th>Action</th>
					</tr>
				</thead>
			</table>    
        </div>
    </div>
    <!-- END Portlet PORTLET-->
</div>
<!-- END Column -->
<div class="modal fade" id="add-modal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Add New User</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-3 control-label">Username</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-user"></i>
                                        </span>
                                        <input type="text" class="form-control" name="username" id="username" placeholder="Type Username..">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Full Name</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-user-md"></i>
                                        </span>
                                        <input type="text" class="form-control" name="fullname" id="fullname" placeholder="Type Full Name..">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">E-mail</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-envelope"></i>
                                        </span>
                                        <input type="email" class="form-control" name="email" id="email" placeholder="Email Address">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Phone</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-user-md"></i>
                                        </span>
                                        <input type="text" class="form-control" name="phone" id="phone" placeholder="Type Phone Number..">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Admin Status</label>
                            <div class="col-md-9">
                                <select name="status" id="status" class="form-control input-medium">
                                    <option value="" style="color:#ccc !important;">Select Admin Status</option>
                                    <option value="admin">Admin</option>
                                    <option value="superadmin">Super Admin</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="button" class="btn blue" id="save-button">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="edit-modal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Edit User</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-3 control-label">Username</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-user"></i>
                                        </span>
										<input type="hidden" class="form-control" id="id_edit">
                                        <input type="text" class="form-control" id="username_edit" placeholder="Type Username..">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Full Name</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-user-md"></i>
                                        </span>
                                        <input type="text" class="form-control" id="fullname_edit" placeholder="Type Full Name..">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">E-mail</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-envelope"></i>
                                        </span>
                                        <input type="email" class="form-control" id="email_edit" placeholder="Email Address">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Phone</label>
                            <div class="col-md-9">
                                <div class="input-inline input-medium">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                        <i class="fa fa-user-md"></i>
                                        </span>
                                        <input type="text" class="form-control" id="phone_edit" placeholder="Type Phone Number..">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Admin Status</label>
                            <div class="col-md-9">
                                <select id="status_edit" class="form-control input-medium">
                                    <option value="" style="color:#ccc !important;">Select Admin Status</option>
                                    <option value="admin">Admin</option>
                                    <option value="superadmin">Super Admin</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="button" class="btn blue" id="update-button">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>